<template>
  <view class="my_wrap">
	  <view class="mark_box"></view>
	  <view class="header_box">
		  <view class="title_box">
			  <text>我的</text>
		  </view>
	  </view>
	  <view class="user_info_box">
		  <view class="avatar_box">
			  <fui-avatar height="114" width="114" src="http://wangweilun.top:1112/myUtils/images/avatar.png"></fui-avatar>
		  </view>
		  <view class="nick_name_box">
			  <span>别吃我的小熊饼干</span>
			  <CustomIcon class="nick_name_arrows_right" name="arrows_right" width="18" height="18"></CustomIcon>
		  </view>
	  </view>
	  <view class="options_box">
		  <view class="option_item_box" @click="testClick('投诉与反馈')">
			  <OptionItem title="投诉与反馈" iconName="feedback" ikey="1"></OptionItem>
		  </view>
		  <view class="option_item_box" @click="showLogoutDialog()">
		  	  <OptionItem title="注销账户" iconName="logout" ikey="2"></OptionItem>	  
		  </view>
	  </view>
	  <!-- 注销账户弹窗 -->
	  <fui-dialog :show="isShowLogoutDialog" content="确定注销账户将会清除账号所有信息!" maskClosable @click="logoutDialogOk()" @close="logoutDialogCancel()"></fui-dialog>
  </view>
</template>

<script>
import { defineComponent,ref,onMounted } from 'vue';
import './index.scss'
export default defineComponent({
  name: 'My',
});
</script>
<script setup>
	import OptionItem from './component/optionitem.vue'
	import CustomIcon from '../../../components/icon/customicon.vue'
	import useColorStore from '../../../stores/index.js'
	
	
	
	const colorStore = useColorStore()
	const msg = ref('我的')
	
	
	// 显示注销账户弹窗的标识
	const isShowLogoutDialog = ref(false)
	
	// 显示注销账户弹窗的事件
	const showLogoutDialog = ()=>{
		isShowLogoutDialog.value = true
	}
	
	// 注销账户弹窗的确定点击事件
	const logoutDialogOk = ()=>{
		isShowLogoutDialog.value = false
	}
	
	// 注销账户弹窗的取消点击事件
	const logoutDialogCancel = ()=>{
		isShowLogoutDialog.value = false
	}
	
	// 测试optionItem点击事件
	const testClick = (msg)=>{
		console.log(msg);
	}
	
	
	onMounted(()=>{
		console.log(colorStore.color);
	})
</script>

<style lang="scss" scoped></style>
